<template>
	<uv-popup ref="popup" mode="center" bg-color="#fff" closeable>
		<view class="content">
			<uv-checkbox-group v-model="checkboxValue">
				<uv-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in chapterList" :key="index" :label="`${item.name}(星球数量${item.categoryCount};课程数量${item.courseCount})`" :name="item.chapter"></uv-checkbox>
			</uv-checkbox-group>
			<uv-button text="取消" @click="close"></uv-button>
			<uv-button text="保存" :loading="btnLoading" loading-text="保存中..." type="primary" @click="save"></uv-button>
		</view>
	</uv-popup>
</template>
<script setup>
	import { ref, watch } from 'vue';
	import { groupChapterChange } from '/common/api/group.js';
	const emits = defineEmits(['reloadData']);
	const popup = ref(null);
	const checkboxValue = ref([]);
	const btnLoading = ref(false);
	const props = defineProps({
		chapterList: Array,
		selectChapterList: Array,
		groupCode: String
	})
	watch(() => props.selectChapterList, (newVal) => {
		if (newVal && newVal.length) {
			newVal.forEach(item => {
				checkboxValue.value.push(item.chapter)
			})
		}
	}, { immediate: true, deep: true })
	async function save() {
		btnLoading.value = true;
		const characterId = getApp().globalData.dzcharacter?.character?.characterId;
		const res = await groupChapterChange({
			characterId,
			groupCode: props.groupCode,
			chapters: checkboxValue.value
		})
		btnLoading.value = false;
		emits('reloadData');
		close();
	}

	async function removeOnlyOne(chpater) {
		checkboxValue.value = checkboxValue.value.filter(item => item != chpater);
		await save();
	}

	function open() {
		popup.value.open();
	}

	function close() {
		popup.value.close();
	}
	defineExpose({ open, removeOnlyOne })
</script>
<style scoped lang="scss">
	.content {
		width: 1000px;
		height: 600px;
	}
</style>